﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Roleqx</title>
    <script src="~/lib/axios/dist/axios.js"></script>
    <script src="~/lib/vue/dist/vue.js"></script>
    <script src="~/lib/element-ui/lib/index.js"></script>
    <link href="~/lib/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-card class="box-card" style="height: 65px">
                    <el-form ref="form" :model="form" label-width="68px" :inline="true" size="mini">

                        <el-form-item label="角色编号" prop="RoleID" >
                            <el-input v-model="form.RoleID" style="width: 70px;" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="角色名称" prop="Rolename" >
                            <el-input v-model="form.Rolename" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="角色说明" prop="Texs" >
                            <el-input v-model="form.Texs" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="角色是否可用" prop="Ysn" label-width="100px">
                            <template>
                                <el-select v-model="form.value" placeholder="请选择是否可用">
                                    <el-option v-for="item in form.Ysn"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item>
                            <template>
                                <el-button type="primary" @@click="update()">修改</el-button>
                                <el-button @@click="fet()">返回</el-button>
                            </template>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-header>
            <el-main>
                <el-card class="box-card"  style=" height: 540px; overflow: auto;">
                    <el-tree :show-checkbox="true"
                             :data="list"
                             :props="treeProps"
                             node-key="id"
                             ref="righttree"
                             :default-expand-all="false"
                             :default-checked-keys="treeData"
                             :default-expanded-keys="treeData">
                    </el-tree>
                </el-card>
            </el-main>
        </el-container>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                list: [],//权限
                form: {
                    RoleID: '',
                    Rolename: '',
                    Texs: '',
                    Ysn: [{
                        value: 1,
                        label: '是'
                    },
                    {
                        value: 0,
                        label: '否'
                        }],
                    value:''
                },
                treeData: [],//默认显示当前已有的权限
                treeProps: {
                    children: "children",
                    label: "label",
                },
            },
            methods: {
                update() {
                    this.$confirm('此操作将删除用户, 是否删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //获取选中的节点
                        var getkeys = [
                            ...this.$refs.righttree.getCheckedKeys(),
                            ...this.$refs.righttree.getHalfCheckedKeys(),
                        ];
                        var zhi = getkeys;
                        //删除当前角色所有权限
                        axios.get('/Role/Delts', {
                            params: {
                                id:  @ViewBag.RoleID,
                            }
                        })
                            .then(res => {
                                console.info(res);
                                for (let index in zhi) {
                                    //添加角色权限
                                axios.get('/Role/Inserts', {
                                    params: {
                                        rid: @ViewBag.RoleID,
                                        i: zhi[index],
                                    }
                                })
                                    .then(res => {
                                        console.info(res);
                                           //修改角色权限
                        axios.get('/Role/Update', {
                                    params: {
                                RoleID: @ViewBag.RoleID,
                                Rolename: this.form.Rolename,
                                Texs: this.form.Texs,
                                Ysn: this.form.value,
                                    }
                                })
                                    .then(res => {
                                        console.info(res);
                                        window.parent.location.href = '/Home/Index/' +@ViewBag.id;
                                    })
                                    .catch(err => {
                                        console.info(err);
                                    });

                                    })
                                    .catch(err => {
                                        console.info(err);
                                    });
                            }
                        })
                        .catch(err => {
                            console.info(err);
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                fet() {
                    location.href = "/Role/Role";
                },
                fill() {
                        //当前角色查询
                    axios.get('/Role/Que/' + @ViewBag.RoleID)
                        .then(res => {
                            console.info(res);
                            this.form.RoleID = res.data.RoleID;
                            this.form.Rolename = res.data.Rolename;
                            this.form.Texs = res.data.Texs;
                            this.form.value = res.data.Ysn;
                        })
                        .catch(err => {
                            console.info(err);
                        });
                    //权限递归查询
                    axios.get('/Home/dg', {
                    })
                        .then(res => {
                            console.info(res);
                            this.list = res.data;
                        })
                        .catch(err => {
                            console.info(err);
                        });
                      //角色权限查询
                    axios.get('/Role/Quer', {
                        params: {
                            pid:  @ViewBag.RoleID,
                        }
                    })
                        .then(res => {
                            console.info(res);
                            let io = [];
                            for (let index in res.data.Data) {
                                io.push(res.data.Data[index].PermissionsID);
                            }
                            this.treeData = io;
                        })
                        .catch(err => {
                            console.info(err);
                        });
                }
            },
            //可以对vue的数据和方法进行操作,不能对DOM进行操作
            created: function () {
                this.fill();
            }
        });
    </script>
    <style>

        element.style {
            height: 100%;
            width: 1239px;
        }

        .el-button.is-circle {
            border-radius: 50%;
            padding: 12px;
            position: relative;
            top: -10px;
            right: -570px;
        }
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
    </style>
</body>
</html>
